import React from 'react';
import { Card, Row, Col, Typography, Button, message } from 'antd';
import { 
  ScissorOutlined, 
  CompressOutlined, 
  RotateRightOutlined,
  ZoomInOutlined,
  PictureOutlined,
  BorderOuterOutlined,
  SnippetsOutlined
} from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const ImageTools: React.FC = () => {
  
  const tools = [
    {
      key: 'image-cropper',
      icon: <ScissorOutlined style={{ fontSize: '2rem' }} />,
      title: '图片裁剪',
      description: '精确裁剪图片，支持自定义尺寸和比例',
      color: '#1890ff'
    },
    {
      key: 'batch-cropper',
      icon: <SnippetsOutlined style={{ fontSize: '2rem' }} />,
      title: '批量裁剪',
      description: '批量处理多张图片，支持统一尺寸设置',
      color: '#722ed1'
    },
    {
      key: 'image-compressor',
      icon: <CompressOutlined style={{ fontSize: '2rem' }} />,
      title: '图片压缩',
      description: '在保持质量的同时减小图片文件大小',
      color: '#52c41a'
    },
    {
      key: 'image-rotator',
      icon: <RotateRightOutlined style={{ fontSize: '2rem' }} />,
      title: '图片旋转',
      description: '旋转图片到任意角度',
      color: '#722ed1'
    },
    {
      key: 'image-resizer',
      icon: <ZoomInOutlined style={{ fontSize: '2rem' }} />,
      title: '图片缩放',
      description: '调整图片尺寸大小',
      color: '#fa8c16'
    },
    {
      key: 'watermark',
      icon: <BorderOuterOutlined style={{ fontSize: '2rem' }} />,
      title: '添加水印',
      description: '为图片添加文字或图片水印',
      color: '#f5222d'
    },
    {
      key: 'format-converter',
      icon: <PictureOutlined style={{ fontSize: '2rem' }} />,
      title: '格式转换',
      description: '在不同图片格式之间转换',
      color: '#13c2c2'
    }
  ];

  const handleToolClick = (key: string) => {
    // 目前实现了图片裁剪和批量裁剪功能
    if (key === 'image-cropper' || key === 'batch-cropper') {
      // 通过全局事件通知 App 组件切换页面
      window.dispatchEvent(new CustomEvent('navigate', { detail: key }));
    } else {
      // 其他功能提示未实现
      message.info(`${tools.find(t => t.key === key)?.title}功能即将推出，敬请期待！`);
    }
  };

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2}>图片处理工具集</Title>
      <Paragraph>提供各种图片处理功能，满足您的日常图片编辑需求</Paragraph>
      
      <Row gutter={[24, 24]} style={{ marginTop: 24 }}>
        {tools.map((tool) => (
          <Col span={8} key={tool.key}>
            <Card 
              hoverable 
              style={{ 
                borderRadius: 8,
                height: '100%',
                borderLeft: `4px solid ${tool.color}`
              }}
            >
              <div style={{ 
                display: 'flex', 
                flexDirection: 'column', 
                alignItems: 'center',
                textAlign: 'center',
                height: '100%'
              }}>
                <div style={{ color: tool.color, marginBottom: 16 }}>
                  {tool.icon}
                </div>
                <Title level={4} style={{ marginBottom: 12 }}>{tool.title}</Title>
                <Paragraph style={{ marginBottom: 16, flex: 1 }}>
                  {tool.description}
                </Paragraph>
                <Button 
                  type="primary" 
                  onClick={() => handleToolClick(tool.key)}
                  ghost
                >
                  立即使用
                </Button>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default ImageTools;